<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="设备编号">
          <el-input
            v-model="formInline.deviceNumber"
            placeholder="请输入设备编号"
            clearable
            @change="handlerSerach"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select
            v-model="formInline.deviceType"
            placeholder="请输入设备类型"
            clearable
            @change="handlerSerach"
          >
            <el-option
              v-for="item in typelist"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间:">
          <!-- 日历 -->
          <div class="workDate">
            <el-date-picker
              v-model="value1"
              class="work_date"
              value-format="yyyy-MM-dd"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime"
              ref="referenceRef"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item prop="region">
          <el-button type="primary" @click="handlerSerach">确认搜索</el-button>
          <el-button type="success" @click="handleryes">已读</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- <el-table-column prop="workOrderNumber" label="工单编号" width="180">
        </el-table-column> -->
        <el-table-column prop="deviceNumber" label="设备编号" width="180">
        </el-table-column>
        <el-table-column prop="type_name" label="设备类型" width="180">
        </el-table-column>

        <el-table-column prop="content" label="报警原因">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.offline == 1" type="success">{{
                scoped.row.content
              }}</el-tag>
              <el-tag v-else type="danger">{{ scoped.row.content }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="add_time" label="报警时间(秒)">
        </el-table-column>
        <el-table-column prop="location" label="设备位置"> </el-table-column>
        <el-table-column prop="isRead" label="是否已读">
          <template slot-scope="scoped">
            <div>
              <el-tag type="info" v-if="scoped.row.isRead == 2">未读</el-tag>
              <el-tag type="success" v-else>已读</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="查看详情">
          <template slot-scope="scoped">
            <div>
              <el-button
                type="warning"
                size="small"
                @click="
                  handlerdetial(
                    scoped.row.deviceId,
                    scoped.row.isRead,
                    scoped.row.id,
                    scoped.row
                  )
                "
                >查看详情</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="formInline.pageSize"
          :current-page="currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableCount"
          class="management_page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getWarningList, devicTypeList, readWarning } from "../../utils/api";
export default {
  data() {
    return {
      tableData: [],

      formInline: {
        deviceNumber: "",
        deviceType: "",
        startTime: "",
        endTime: "",
        pageNumber: 1,
        pageSize: 10
      },
      tableCount: 0,
      value1: "",
      typelist: [],
      checkedId: [],
      currentPage: 1
    };
  },
  created() {
    this.handlergetWarningList();
    this.handlerdevicTypeList();
  },
  mounted() {},
  methods: {
    // 点击确定搜索
    handlerSerach() {
      this.currentPage = 1;
      this.handlergetWarningList();
    },
    // 点击复选框选择告警记录
    handleSelectionChange(val) {
      var result = val.map(item => {
        return item.id;
      });
      this.checkedId = result;
    },
    // 点击已读
    handleryes() {
      if (this.checkedId.length == 0) {
        this.$message.error("请选择告警记录");
      } else {
        this.checkedId = JSON.stringify(this.checkedId);

        this.$confirm("您确定将该告警记录设备为已读吗, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.postRequest(readWarning, {
              warningId: this.checkedId
            }).then(res => {
              if (res.code == 200) {
                this.$message.success("该告警记录状态修改为已读");
                this.handlergetWarningList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改"
            });
          });
      }
    },
    // 点击选择时间调用的函数
    changeTime(value) {
      // const result = value.join("");
      // result.substring(10, 0)
      //  result.substring(10)

      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.formInline.startTime = "";
        this.formInline.endTime = "";
        this.handlergetWarningList();
      } else {
        this.formInline.startTime = value[0];
        this.formInline.endTime = value[1];
        this.handlergetWarningList();
      }
    },
    // 获取设备类型
    handlerdevicTypeList() {
      this.postRequest(devicTypeList, {
        companyId: window.sessionStorage.getItem("companyId")
      }).then(res => {
        if (res.code == 200) {
          this.typelist = res.data;
        }
      });
    },
    // 获取告警列表
    handlergetWarningList() {
      const params = {
        deviceNumber: this.formInline.deviceNumber,
        deviceType: this.formInline.deviceType,
        startTime: this.formInline.startTime,
        endTime: this.formInline.endTime,
        pageNumber: this.currentPage,
        pageSize: this.formInline.pageSize
      };
      this.postRequest(getWarningList, params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.tableCount = res.data.count;
        }
      });
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.handlergetWarningList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlergetWarningList();
    },
    //点击查看设备的详情
    handlerdetial(deviceId, isRead, waringId, facilityData) {
      this.$router.push("/particulars");
      window.sessionStorage.setItem("deviceId", deviceId);
      window.sessionStorage.setItem("waringId", waringId);
      window.sessionStorage.setItem("isRead", isRead);
      window.sessionStorage.setItem(
        "facilityData",
        JSON.stringify(facilityData)
      );
    }
  }
};
</script>

<style></style>
